<template>
  <div>
    <h1>child two</h1>
    <h1>{{ num }}</h1>
    <h1>{{ name }}</h1>
    <h1>{{ evenOrOdd }}</h1>
    <button @click="add">加1</button>
    <button @click="dis">减 1</button>
    <button @click="oddAdd">如果奇数 加 1</button>
    <button @click="evenDis">如果偶数 减1</button>
  </div>
</template>

<script>
// 使用vuex的辅助的钩子函数
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    //  mapState 和mapGetters中值可以直接在template当中使用 ， 在计算属性中直接展开
    ...mapState(["num", "name"]),
    ...mapGetters(["evenOrOdd"]),
  },
  mounted() {
    //   vuex当中存储的状态可以获取到，但是不能在组件内部直接进行更改 ，如果要该 commit 触发mutations  或者通过dispatch触发actions
    console.log(this.num, this.name, this.evenOrOdd);
    // this.num += 1;
  },
  methods: {
    ...mapMutations(["add"]),
    ...mapActions(["oddAdd", "evenDis"]),
    dis() {
      this.$store.commit("dis", { count: 10 });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>